<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="domIdaa">

    </div>
    
    <ul class="domClassaa">
        <li></li>
    </ul>
    <ul class="domClassaa">
        <li></li>
    </ul>
    <ul class="domClassaa">
        <li></li>
    </ul>
    <p>asdfadsf</p>

    <script>
        console.log(document.getElementById('domIdaa'));
        console.log(document.getElementsByClassName('domClassaa'));
        console.log(document.getElementsByTagName('p'));
        
        var p = document.querySelector('p');
        // console.log(document.getElementById('domIdaa'));

        var oi = document.createElement('i');
        var oIText = document.createTextNode('cd');
        var attrName = document.createAttribute('custormName');

        oi.appendChild(oIText);

        attrName.value="练习";

        oi.setAttributeNode(attrName)

        p.appendChild(oi);

        console.log(document.querySelector('i').getAttribute('custormname'));
        document.querySelector('i').setAttribute('custormName', '1902');
        document.querySelector('i').removeAttribute('custormName')
        document.querySelector('i').style.background = 'red';
        document.querySelector('i').style.color = 'white';
        document.querySelector('i').style.cssText = 'display:block;width=200px;height:200px;color:white; background:red';
        document.querySelector('i').className = 'customi';

        // document.querySelector('i').onclick= function (e) {
        //     this.style.background = 'blue';  
        // }

        document.querySelector('i').onmousedown = function () {
            this.style.background = 'yellow';
        }

    </script>
</body>
</html>